<style>
	.global_table .table-scroll-x {
		overflow: hidden;
	}

	.global_table:hover .table-scroll-x {
		overflow-x: scroll;
	}

	.text-hover-top {
		position: absolute;
		padding: 5px 15px;
		background-color: #fff;
		z-index: 9;
		color: #999;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		border-radius: 4px;
		line-height: 24px;
		width: auto;
		white-space: nowrap;
	}

	.el-tooltip__popper.is-light {
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		border: 0;
	}

	.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow,
	.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow {
		border: 0;
	}

	.text-hover-top::before {
		content: '';
		position: absolute;
		left: 50%;
		top: -10px;
		width: 0;
		height: 0;
		border-width: 0 10px 10px;
		border-style: solid;
		border-color: transparent transparent #fff;
		transform: translate(-50%, 0);
	}

	.history-text-ss {
		display: none;
		text-align: left;
	}

	.hover-show-hs:hover .history-text-ss {
		display: block;
	}

	.text-hover-top li {
		white-space: nowrap;
		line-height: 40px;
		border-bottom: 1px solid #ddd;
	}

	.text-hover-top li:last-child {
		border: none;
	}

	.scal-font {
		transform: scale(0.8);
		display: inline-block;
		text-decoration: line-through;
		font-size: 12px;
		color: #999;
	}

	.scal-font1 {
		text-decoration: line-through;
		color: #999;
	}

	.list-nth-child-bg-1:nth-child(2n+1),
	.list-nth-child-bg-2:nth-child(2n+1),
	.list-nth-child-bg-3:nth-child(2n+1) {
		background-color: #F9F9F9;
	}

	.color-cfcfcf {
		color: #cfcfcf;
		font-size: 12px;
	}

	.a-line {
		position: relative;
		padding-left: 12px;
	}

	.a-line::before {
		content: '';
		position: absolute;
		left: 0;
		top: 5px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #73AE70;
	}

	.b-line {
		position: relative;
		padding-left: 12px;
	}

	.b-line::before {
		content: '';
		position: absolute;
		left: 0;
		top: 5px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #FFAB26;
	}

	.dy_center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.iconHover {
		position: relative;
	}

	.hoverText {
		display: none;
		position: absolute;
		z-index: 9999;
		left: -10px;
		width: 260px;
		height: 110px;
		flex-direction: column;
		align-items: center;
		padding-top: 12px;
		color: #999;
	}

	.hoverText div {
		position: absolute;
		display: inline-block;
		top: 7px;
		left: 10px;
		width: 0;
		height: 0px;
		content: '';
		border-style: solid;
		border-width: 6px;
		border-color: #fff #fff transparent transparent;
		transform: rotate(315deg);
		box-shadow: 2px -2px 2px #ccc;
		color: #999;
	}

	.hoverText ul {
		width: 100%;
		padding: 8px 18px;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 0 4px 2px rgba(200, 200, 200, .75);
	}

	.iconHover:hover .hoverText {
		display: flex;
	}
	.lineHeight80 {
		line-height: 80px;
	}
</style>
<section id="incomeRight" class="ml-24 mr-24 mb-20">
	<div class="hl-list-title clearfix">
		<h4 class="pull-left">收入确认</h4>
	</div>

	<div class="head-container clearfix mt-10 border-b pb-10 relative z-50">
		<div class="pull-left">
			<div class="pull-left">
				<p class="color-cfcfcf">信息检索</p>
				<div class="global_search">
					<span class="icon-Gm-search"></span>
					<input v-model="keyword" autocomplete="off" type="text" class="global_ipt_text"
						placeholder="客户/合同名称/合同编号/管理编号" @keyup.enter="getData(1)" style="width:240px" />
				</div>
			</div>
			<div class="pull-left ml-16">
				<p class="color-cfcfcf">费项</p>
				<hl-select :data="expenditureArr" v-model="expenditureSelected" width="160" @on-change="expendSelectFn"
					placeholder="请选择费项"></hl-select>
			</div>
			<div class="pull-left ml-16" v-if="isExtenseFlag">
				<p class="color-cfcfcf">起始日期</p>
				<div class="dy-flex">
					<hl-select :data="startYearList" v-model="setyear" width="96" @on-change="getyearfn" class="mr-5"></hl-select>
					<hl-select :data="month" v-model="setmonth" width="66" @on-change="getmonthfn"></hl-select>
				</div>
			</div>
			<div class="pull-left" style="margin: 25px 0 0 10px" v-if="isExtenseFlag">-</div>
			<div class="pull-left ml-16" v-if="isExtenseFlag">
				<p class="color-cfcfcf">截止日期</p>
				<div class="dy-flex">
					<hl-select :data="startYearList" v-model="endyear" width="96" @on-change="endyearback" class="mr-5">
					</hl-select>
					<hl-select :data="month" v-model="endmonth" width="66" @on-change="endmonthback"></hl-select>
				</div>
			</div>
		</div>

		<div class="pull-left mt-10" v-if="isExtenseFlag">
			<div class="pull-left mr-16">
				<p class="color-cfcfcf">项目</p>
				<hl-select :data="projectList" v-model="projectId" width="120" @on-change="getGroupPrimaryData"></hl-select>
			</div>
			<div class="pull-left mr-16">
				<p class="color-cfcfcf">组合</p>
				<hl-cascader :selected="selectedGroupData" :width="140" :primary-data="groupOneData"
					:secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup"
					@on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
			</div>
			<div class="pull-left mr-16">
				<p class="color-cfcfcf">楼宇</p>
				<hl-select :data="buildingList" v-model="buildingId" width="120" @on-change="getbuildingId"></hl-select>
			</div>
			<div class="pull-left mr-16">
				<p class="color-cfcfcf">楼层</p>
				<hl-select :data="floorList" v-model="floorId" width="120" @on-change="getfloorId"></hl-select>
			</div>
			<div class="pull-left">
				<p class="color-cfcfcf">单元</p>
				<hl-select :data="unitList" v-model="unitId" width="120" @on-change="getunitId"></hl-select>
			</div>
		</div>
		<div class="button-group pull-left ml-16" :style="{marginTop: isExtenseFlag ? '30px' : '20px'}">
			<hl-button @on-click="searchSubmit" size="mini">查询</hl-button>
			<hl-button @on-click="resetSubmit" size="mini">重置</hl-button>
		</div>
		<div class="global_open_sign" @click="openSearch">
			<span v-if="!isExtenseFlag">更多筛选项</span>
			<span v-if="isExtenseFlag">收起筛选项</span>
		</div>
	</div>


	<div class="global_screening_container">
		<hl-checkbox-button style="float:left" :data="billStateData" v-model="selectedStateCode" @on-click="selectBillMenu"
			merge></hl-checkbox-button>
		<span class="global_refresh_icon icon-uniE94B" @click="resetTabbar"></span>
	</div>

	<div class="clearfix pt-10">
		<div class="dy-flex" style="justify-content: space-between;">
			<div class="relative br-4 dy-fx-1 mr-10" style="height: 76px;background:rgba(111,124,219,0.3);">
				<p class="pl-12" style="color: rgba(111,124,219,0.6);margin: 14px 0 8px;">合同应收（元）</p>
				<h1 class="pl-12 font-wt" style="color: #6F7CDB;font-size: 21px;margin-top: 0;">
					{{ revenueRecognitionAmount.contractAmount  | formatNum }}</h1>
				<span class="absolute icon-Nav-finance-amount"
					style="right: 10px;bottom: 26px;color: #6F7CDB;font-size: 18px;"></span>
			</div>
			<div class="relative br-4 dy-fx-1 mr-10" style="height: 76px;background:rgba(206, 226, 251, 1);">
				<p class="pl-12" style="color: #3399FF;margin: 14px 0 8px;">累计收入（元）</p>
				<h1 class="pl-12 font-wt" style="color: #3399FF;font-size: 21px;margin-top: 0;">
					{{ revenueRecognitionAmount.totalAmount | formatNum }}</h1>
				<span class="absolute icon-Nav-finance-amount"
					style="right: 10px;bottom: 26px;color: #3399FF;font-size: 18px;"></span>
			</div>
			<div class="relative br-4 dy-fx-1" style="width: 470px;height: 76px;background:rgba(244,174,71,0.4);">
				<p class="pl-12" style="color: rgba(255,171,38,0.6);margin: 14px 0 8px;">累计应收（元）</p>
				<h1 class="pl-12 font-wt" style="color: #F4AE47;font-size: 21px;margin-top: 0;">
					{{ revenueRecognitionAmount.totaReceivableAmount | formatNum }}</h1>
				<span class="absolute icon-Nav-finance-amount"
					style="right: 10px;bottom: 26px;color: #F4AE47;font-size: 18px;"></span>
			</div>
		</div>
	</div>

	<div class="mb-10 mt-10 dy-flex ml-10" style="align-items: center;">
		<span class="a-line">收入确认</span>
		<span class="b-line ml-10">账单分摊</span>
		<ul class="iconHover ml-10">
			<li class="icon-Gm-explain"></li>
			<li class="hoverText">
				<div></div>
				<ul class="instro">
					<li style="lineHeight:24px">收入确认定义：不含税的计划收入金额 </li>
					<li style="lineHeight:24px">账单分摊定义：不含税的应收款金额；
					</li>
				</ul>
			</li>
		</ul>
	</div>

	<div class="business_mange br-4 clearfix relative global_table config-table-container"
		style="margin:0 0 10px 0;border:1px solid #E5E5E5">
		<div class="config-table-wrap" style="marginRight:99px;" :class="{'config-table-scroll':isScroll}"
			@mouseenter="showScroll" @mouseleave="hideScroll">
			<div style="width:1000px;">
				<ul class="dy-flex l-h-40 text-center global_table_title">
					<li class="dy-fx-1">序</li>
					<li class="dy-fx-3">客户名称</li>
					<li class="dy-fx-3">合同名称</li>
					<li class="dy-fx-3">合同编号</li>
					<li class="dy-fx-3">费项</li>
					<li class="dy-fx-3">合同应收</li>
					<li class="dy-fx-3">累计金额</li>
					<li class="dy-fx-3">{{localMonth}}</li>
				</ul>
				<div>
					<ul class="dy-flex l-h-40 text-center border-t global_table_item"
						v-for="(item, index) in listData.revenueRecognitions">
						<li class="dy-fx-1 dy_center">{{index+1}}</li>
						<li class="dy-fx-3 ellipsis-1 lineHeight80" :title="item.customerName">{{item.customerName}}</li>
						<li class="dy-fx-3 ellipsis-1 lineHeight80" :title="item.contractName">{{item.contractName}}</li>
						<li class="dy-fx-3 ellipsis-1 lineHeight80" :title="item.contractCcode">{{item.contractCcode}}</li>
						<li class="dy-fx-3 ellipsis-1 lineHeight80" :title="item.expenditureName">{{item.expenditureName}}</li>
						<li class="dy-fx-3 ellipsis-1 lineHeight80" :title="item.contractAmount">{{item.contractAmount}}</li>
						<li class="dy-fx-3">
							<div>
								<span class="a-line"></span>
								{{item.totalAmount || '0.00'}}
							</div>
							<div>
								<span class="b-line"></span>
								{{item.totalReceivableAmount || '0.00'}}
							</div>
						</li>
						<li class="dy-fx-3">
							<div>
								<span class="a-line"></span>
								{{item.currentMonthAmount || '0.00'}}
							</div>
							<div>
								<span class="b-line"></span>
								{{item.currentMonthReceivedAmount || '0.00'}}
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="border-l text-center config-table-operate-wrap" style="width:100px;line-height: 80px;">
			<ul>
				<li class="color-gray pl-12 pr-12 global_table_title" style="line-height: 40px;">操作</li>
				<div>
					<li class="border-t operation pl-12 pr-12 global_table_item"
						v-for="(item, index) in listData.revenueRecognitions">
						<a class="mr-5" @click="goToDetail(item)" target="_blank">详情</a>
					</li>
				</div>
			</ul>
		</div>
	</div>




	<div class="user-page ptb-10 clearfix">
		<div class="pull-left user-page-num">
			<span class="font-14">共<i>{{listData.totalCount || '0'}}</i>条记录</span>
			<span>每页<hl-select :data="limitArr" v-model="limitSelect" width="80" @on-change="selectedLimit"></hl-select>
				条</span>
		</div>
		<div class="pull-right">
			<hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
		</div>
	</div>

	<hl-button type="primary" size="medium" @on-click="exportExcl" v-show="permissions.indexOf('c326') > -1">导出
	</hl-button>

</section>

<script src="modules/bill/scripts/incomeRight.js" charset="utf-8"></script>